<template>
  <div class="container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <div>
          <el-form
            :inline="true"
            :model="requestParams"
            size="small"
            label-width="80px"
            ref="requestParams"
          >
            <el-row>
              <el-col :span="18">
                <el-form-item label="关键字">
                  <el-input
                    v-model="requestParams.keyword"
                    placeholder="根据文章标题搜索"
                    @keyup.enter.native="onSearch"
                  ></el-input>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select
                    v-model="requestParams.state"
                    placeholder="请选择"
                    @keyup.enter.native="onSearch"
                  >
                    <el-option label="启用" :value="1"></el-option>
                    <el-option label="禁用" :value="0"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button @click="onClear">消除</el-button>
                  <el-button type="primary" @click="onSearch">搜索</el-button>
                </el-form-item>
              </el-col>
              <el-button
                class="filter-item fr"
                size="small"
                style="margin-left: 10px;"
                type="success"
                icon="el-icon-edit"
                @click="openDialog()"
                >新增用户</el-button
              >
            </el-row>
          </el-form>
        </div>
        <!-- 搜索 -->
        <!-- 数据记录 -->
        <el-alert
          type="info"
          v-if="alertText !== ''"
          :title="alertText"
          class="alert"
          show-icon
        >
        </el-alert>
        <!-- end -->
        <!-- 数据列表 -->
        <template>
          <el-table
            style="width: 100%"
            highlight-current-row
            fit
            :key="tableKey"
            :data="dataList"
            v-loading="listLoading"
            element-loading-text="给我一点时间"
            :row-style="{ height: '57px' }"
          >
            <el-table-column label="序号" width="80">
              <template slot-scope="scope">
                <span>{{ scope.row.id }}</span>
              </template>
            </el-table-column>
            <el-table-column label="文章标题" width="400">
              <template slot-scope="scope">
                <span>{{ scope.row.title }}</span>
                <a
                  @click.prevent="openVideo(scope.row.videoURL)"
                  v-if="scope.row.videoURL"
                  href="#"
                  class="el-icon-film"
                ></a>
              </template>
            </el-table-column>
            <el-table-column label="阅读数">
              <template slot-scope="scope">
                <span>{{ scope.row.visits }}</span>
              </template>
            </el-table-column>
            <el-table-column label="录入人">
              <template slot-scope="scope">
                <span>{{ scope.row.username }}</span>
              </template>
            </el-table-column>
            <el-table-column label="录入时间">
              <template slot-scope="scope">
                <span>{{ scope.row.createTime | parseTimeByString }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.state == 1">启用</span>
                <span v-else>禁用</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180px">
              <template slot-scope="scope">
                <el-button type="text" @click="openBrowse(scope.row)"
                  >预览</el-button
                >
                <el-button type="text" @click="toggleState(scope.row)">{{
                  scope.row.state === 1 ? '禁用' : '启用'
                }}</el-button>
                <el-button
                  type="text"
                  @click="openDialog(scope.row)"
                  :disabled="scope.row.state === 1"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  @click="delArticle(scope.row)"
                  :disabled="scope.row.state === 1 || scope.row.totals > 0"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!-- end -->
        <!-- 分页 -->
        <el-pagination
          style="margin-top:20px;text-align:right"
          background
          layout="prev, pager, next, sizes, jumper"
          :total="total"
          :page-size="requestParams.pagesize"
          :current-page="requestParams.page"
          @current-change="pager"
          :page-sizes="[5, 10, 20, 50]"
          @size-change="handleSizeChange"
          hide-on-single-page
        ></el-pagination>
        <!-- end -->
      </el-card>
      <!-- 新增添加和修改 -->
      <articles-add
        ref="articlesAdd"
        :data="currArticle"
        @updateList="updateList()"
      >
      </articles-add>
      <!-- 播放视频 -->
      <div class="videobox" v-if="videoURL">
        <div class="close" @click="closeVideo()">
          <span class="el-icon-close"></span>
        </div>
        <div class="box">
          <video ref="video" :src="videoURL" autoplay></video>
        </div>
      </div>
      <!-- / 播放视频 -->
      <!-- 浏览界面 -->
      <articles-preview :data="currArticle" ref="articlesBrowse">
      </articles-preview>
      <!-- / 浏览界面 -->
    </div>
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants'
import ArticlesAdd from '../components/articles-add'
import ArticlesPreview from '../components/articles-preview'
import { list, changeState, remove } from '@/api/hmmm/articles'
export default {
  name: 'ArticlesList',
  components: {
    ArticlesAdd,
    ArticlesPreview
  },
  data() {
    return {
      tableKey: 0,
      dataList: [], // 列表数据
      listLoading: true,
      total: null,
      alertText: '',
      requestParams: {
        page: 1,
        pagesize: 10,
        keyword: null,
        state: null
      },
      currArticle: {},
      videoURL: null
    }
  },
  computed: {
    status() {
      return status
    }
  },
  // 创建完毕状态
  created() {
    this.getList()
  },
  methods: {
    // 获取列表数据
    async getList() {
      this.listLoading = true
      const { data: res } = await list(this.requestParams)
      this.dataList = res.items
      // console.log(res)
      // 获取总条数
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    // 清空搜索
    onClear() {
      this.requestParams = {
        keyword: null,
        state: null,
        page: 1,
        pagesize: 10
      }
    },
    // 搜索内容
    onSearch() {
      this.requestParams.page = 1
      this.getList()
      this.onClear()
    },
    // 切换条数
    handleSizeChange(size) {
      this.requestParams.page = 1
      this.requestParams.pagesize = size
      this.getList()
    },
    // 切换分页
    pager(np) {
      this.requestParams.page = np
      this.getList()
    },
    // 新增|修改 后更新列表
    updateList() {
      if (!this.currArticle.id) {
        this.requestParams.page = 1
      }
      this.getList()
    },
    // 删除 后更新列表
    // 删除 后更新列表
    async delArticle(article) {
      const tagsRmove = await this.$confirm(
        '此操作将永久删除该标签, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (tagsRmove === 'cancel') {
        this.$message.info('已取消删除')
      }
      await remove({
        id: article.id
      })
      this.$message.success('删除成功')
      if (document.querySelectorAll('.el-card tbody tr').length === 1) {
        this.requestParams.page =
          this.requestParams.page > 1 ? this.requestParams.page - 1 : 1
      }
      this.getList()
    },
    // 添加 编辑
    openDialog(article = {}) {
      this.currArticle = article
      this.$nextTick(() => {
        this.$refs.articlesAdd.open()
      })
    },
    // 禁用/启用
    async toggleState(article) {
      await changeState({
        id: article.id,
        state: article.state === 1 ? 0 : 1
      })
      this.$message.success('操作成功')
      article.state = article.state === 1 ? 0 : 1
    },
    // 点击视频图标事件
    openVideo(article) {
      this.videoURL = article
    },
    // 退出视频
    closeVideo() {
      this.videoURL = ''
    },
    // 浏览界面
    openBrowse(article) {
      this.currArticle = article
      this.$nextTick(() => {
        this.$refs.articlesBrowse.open()
      })
    }
  }
}
</script>

<style scoped rel="stylesheet/scss" lang="scss">
::v-deep .el-dialog__footer {
  text-align: right;
}
.alert {
  margin-bottom: 15px;
}
.pagination {
  margin-top: 10px;
}
</style>
<style>
.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
.el-icon-film {
  color: blue;
  font-size: 18px;
}
.videobox {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 30%);
  overflow: hidden;
  z-index: 9999;
}
.videobox .box {
  width: 800px;
  height: 600px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.videobox .box video {
  width: 100%;
  height: 100%;
}
.videobox .el-icon-close {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translate(-50%);
  background: rgb(0 0 0 / 40%);
  box-shadow: 0 0 5px rgb(0 0 0 / 40%);
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  color: rgb(255 255 255);
  font-size: 20px;
}
</style>
